.foxui-breadcrumb {
    display: flex;
}

.foxui-breadcrumb-item {
    &:not(:last-child) {
        a {
            color: $--color-text-regular;

            &:hover {
                color: $--color-primary;
            }
        }
    }

    &:not(:last-child)::after {
        content: '/';
        font-size: $--font-size-medium;
        margin: 0 $--padding-small;
        color: $--color-text-placeholder;
    }

    a {
        color: $--color-text-primary;
        display: inline-block;
        transition: $--all-transition;
    }
}

.content-separator {
    .foxui-breadcrumb-item {
        &:not(:last-child)::after {
            content: attr(data-content);
        }
    }
}

.icon-separator {
    .foxui-breadcrumb-item {
        &:not(:last-child)::after {
            content: '';
            margin: 0;
        }

        i {
            color: $--color-text-placeholder;
            margin-right: 3px;
        }
    }
}
